<template>
  <div class="no404">
    <div class="no404-c">
      <div class="img-c">
        <img src="../assets/404.a57b6f31.png" height="100%" width="100%">
        <img src="../assets/404_cloud.png" style="--i:1" class="cloud" />
        <img src="../assets/404_cloud.png" style="--i:3" class="cloud" />
        <img src="../assets/404_cloud.png" style="--i:6" class="cloud" />
      </div>
      <div class="hint">
        <h2 style="color: #1890FF;">OOPS</h2>
        <p>All rights reserved <a style="text-decoration: none; color: #1890FF;" href="javascript:;">wallstreetcn</a></p>
        <h3>The webmaster said that you can not enter this page...</h3>
        <p class="hint-content">Please check that the URL you entered is correct, or click the button below to return to the homepage.</p>
        <el-button type="primary" @click="backToHome">back to home</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    backToHome() {
      this.$router.push('/home')
    }
  },
  mounted() {
    const elMain = document.querySelector('.el-main')
    const no404 = document.querySelector('.no404')
    no404.style.height = elMain.offsetHeight - 20 + 'px'
  }
}
</script>

<style scoped>
  .no404 {
    height: 100%;
    width: 100%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .no404-c {
    display: flex;
    width: 80%;
    height: 50%;
  }
  .img-c {
    position: relative;
    width: 60%;
    perspective: 500px;
    transform-style: preserve-3d;
  }
  .hint {
    height: 100%;
    width: 30%;
  }
  .hint-content {
    margin: 20px 0;
    color: #a9a9a9;
  }
  .el-button {
    border-radius: 20px;
  }
  .cloud{
    position: absolute;
    top: 20%;
    height: 20%;
    left: calc(var(--i) * 60px);
    animation: cloud 2s linear forwards;
    transform: translate3d(60px, -40px , -20px);
  }
  @keyframes cloud{
    0%{
      transform: translate3d(60px, -40px , -20px);
      opacity: 0;
    }
    80%{
      transform: translate3d(0, 10px , 20px);
      opacity: 1;
    }
    100%{
      transform: translate3d(0, 10px , 20px);
      opacity: 0;
    }
  }
</style>
